<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue过滤器</title>
    <script src="lib/vue.js"></script>
    <script src="lib/axios.min.js"></script>
</head>

<body>
    <div id="box">
        <ul>
            <li v-for="data in datalist" :key="data.channelid">{{data.name | selfFilter}}
                <p>{{handleReplace(data.name)}}</p>
            </li>

        </ul>
    </div>
    <script>
        //vue过滤器方法
        //定义过滤器
        Vue.filter("selfFilter", function (data) {
            return data.replace("漫步", "**")
        });

        new Vue({
            el: "#box",
            data: {
                datalist: []
            },
            mounted() {
                axios.get("https://api.apiopen.top/musicBroadcasting").then(res => {
                    console.log(res.data.result[0].channellist);
                    this.datalist = res.data.result[0].channellist;
                }).catch(err => {
                    console.log(err);
                })
            },
            // 原始js方法
            methods: {
                handleReplace(data) {
                    return data.replace("漫步", "@@")
                }
            }
        })
    </script>

</body>

</html>